// 这是可播放的音频
import { defineComponent, onMounted, ref, computed } from 'vue';
import Styles from './playAudio.module.scss';
import { Slider } from 'vant';
import srcAudio from '../../assets/images/8.wav';

export default defineComponent({
  name: 'PlayAudio',
  props: {
    bgColor: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    let maxTime = ref(0);
    let maxTimecom = ref('');
    let isopen = ref(true);
    let playing = ref(false);
    let audioRef = ref(null);
    let currentTime = ref(0);
    let sliderTime = ref(0);

    const currentTimecom = computed(() => {
      return realFormatSecond(currentTime.value);
    });

    const realFormatSecond = (second: number | string) => {
      if (typeof second === 'number' || typeof second === 'string') {
        let mysecond = typeof second === 'string' ? parseInt(second) : second;
        let hours = Math.floor(mysecond / 3600);
        mysecond = mysecond - hours * 3600;
        let mimute = Math.floor(mysecond / 60);
        mysecond = mysecond - mimute * 60;
        return hours + ':' + ('0' + mimute).slice(-2) + ':' + ('0' + mysecond).slice(-2);
      } else {
        return '0:00:00';
      }
    };

    const startPlayOrPause = () => {
      let ele: any = document.getElementById('myAudio');
      if (playing.value) {
        ele.pause();
      } else {
        ele.play();
      }
    };
    // 当音频暂停
    const onPause = () => {
      isopen.value = !isopen.value;
      playing.value = false;
    };
    // 当音频播放
    const onPlay = () => {
      playing.value = true;
      isopen.value = !isopen.value;
    };

    const onTimeupdate = (res: any) => {
      // 当前时长
      currentTime.value = res.target.currentTime;
      let timeValue = (currentTime.value / maxTime.value) * 100;
      sliderTime.value = typeof timeValue === 'string' ? parseInt(timeValue) : timeValue;
    };

    const change = (val: number) => {
      let ele: any = document.getElementById('myAudio');
      ele.pause();
      ele.currentTime = (val / 100) * maxTime.value;
      if (playing.value) {
        ele.play();
      }
    };

    onMounted(() => {
      let audio: any = document.getElementById('myAudio');
      if (audio) {
        audio.addEventListener(
          'durationchange',
          () => {
            maxTime.value = audio.duration;
            maxTimecom.value = realFormatSecond(maxTime.value);
          },
          false
        );
      }
    });
    return () => (
      <div class={Styles['play-audio']}>
        <audio ref="audioRef" id="myAudio" src={srcAudio} onPause={onPause} onPlay={onPlay} onTimeupdate={onTimeupdate}></audio>
        {/* controls */}
        <div class={Styles['audiobox']}>
          <div>
            <img
              class={Styles['smallimg']}
              onClick={startPlayOrPause}
              src={
                isopen.value
                  ? 'https://editor.xesimg.com/tailor/resource/open-1658215588716.png'
                  : 'https://editor.xesimg.com/tailor/resource/close-1658215594457.png'
              }
            />
          </div>
          <div class={Styles['myslider']}>
            <Slider
              v-model={sliderTime.value}
              onChange={change}
              v-slots={{ button: () => <p style="width: 10px; height: 10px; border-radius: 50%; background: #277DFF"></p> }}
            />
            <span class={Styles['time1']}>{currentTimecom.value}</span>
            <span class={Styles['time2']}>{maxTimecom.value}</span>
          </div>
        </div>
      </div>
    );
  }
});
